<template>
  <el-tree
    v-bind="$attrs"
    :data="data"
    :props="props"
    :node-key="nodeKey"
    :default-expanded-keys="defaultExpandedKeys"
    :default-checked-keys="defaultCheckedKeys"
    :default-expand-all="defaultExpandAll"
    :expand-on-click-node="expandOnClickNode"
    :check-on-click-node="checkOnClickNode"
    :auto-expand-parent="autoExpandParent"
    :default-expand-selected="defaultExpandSelected"
    :check-strictly="checkStrictly"
    :render-content="renderContent"
    :highlight-current="highlightCurrent"
    :expand-icon="expandIcon"
    :check-icon="checkIcon"
    :render-after-expand="renderAfterExpand"
    :load="load"
    :lazy="lazy"
    :draggable="draggable"
    :allow-drag="allowDrag"
    :allow-drop="allowDrop"
    :accordion="accordion"
    :indent="indent"
    :icon-class="iconClass"
    :show-checkbox="showCheckbox"
    :check-descendants="checkDescendants"
    :filter-node-method="filterNodeMethod"
    :empty-text="emptyText"
    :show-line="showLine"
    :class="treeClass"
    @node-click="handleNodeClick"
    @node-contextmenu="handleNodeContextmenu"
    @check-change="handleCheckChange"
    @check="handleCheck"
    @current-change="handleCurrentChange"
    @node-expand="handleNodeExpand"
    @node-collapse="handleNodeCollapse"
    @node-drag-start="handleNodeDragStart"
    @node-drag-enter="handleNodeDragEnter"
    @node-drag-leave="handleNodeDragLeave"
    @node-drag-end="handleNodeDragEnd"
    @node-drop="handleNodeDrop"
  />
</template>

<script>
export default {
  name: 'MyElTree',
  inheritAttrs: false,
  props: {
    data: {
      type: Array,
      default: () => []
    },
    props: {
      type: Object,
      default: () => ({
        children: 'children',
        label: 'label',
        disabled: 'disabled'
      })
    },
    nodeKey: {
      type: String,
      default: 'id'
    },
    defaultExpandedKeys: {
      type: Array,
      default: () => []
    },
    defaultCheckedKeys: {
      type: Array,
      default: () => []
    },
    defaultExpandAll: {
      type: Boolean,
      default: false
    },
    expandOnClickNode: {
      type: Boolean,
      default: true
    },
    checkOnClickNode: {
      type: Boolean,
      default: false
    },
    autoExpandParent: {
      type: Boolean,
      default: true
    },
    defaultExpandSelected: {
      type: Boolean,
      default: false
    },
    checkStrictly: {
      type: Boolean,
      default: false
    },
    renderContent: {
      type: Function,
      default: undefined
    },
    highlightCurrent: {
      type: Boolean,
      default: false
    },
    expandIcon: {
      type: String,
      default: ''
    },
    checkIcon: {
      type: String,
      default: ''
    },
    renderAfterExpand: {
      type: Boolean,
      default: true
    },
    load: {
      type: Function,
      default: undefined
    },
    lazy: {
      type: Boolean,
      default: false
    },
    draggable: {
      type: Boolean,
      default: false
    },
    allowDrag: {
      type: Function,
      default: undefined
    },
    allowDrop: {
      type: Function,
      default: undefined
    },
    accordion: {
      type: Boolean,
      default: false
    },
    indent: {
      type: Number,
      default: 16
    },
    iconClass: {
      type: String,
      default: ''
    },
    showCheckbox: {
      type: Boolean,
      default: false
    },
    checkDescendants: {
      type: Boolean,
      default: false
    },
    filterNodeMethod: {
      type: Function,
      default: undefined
    },
    emptyText: {
      type: String,
      default: '暂无数据'
    },
    showLine: {
      type: Boolean,
      default: false
    },
    treeClass: {
      type: String,
      default: ''
    }
  },
  emits: [
    'node-click', 'node-contextmenu', 'check-change', 'check', 'current-change',
    'node-expand', 'node-collapse', 'node-drag-start', 'node-drag-enter',
    'node-drag-leave', 'node-drag-end', 'node-drop'
  ],
  methods: {
    handleNodeClick(data, node, element) {
      this.$emit('node-click', data, node, element)
    },
    handleNodeContextmenu(event, data, node) {
      this.$emit('node-contextmenu', event, data, node)
    },
    handleCheckChange(data, checked, indeterminate) {
      this.$emit('check-change', data, checked, indeterminate)
    },
    handleCheck(data, checkedInfo) {
      this.$emit('check', data, checkedInfo)
    },
    handleCurrentChange(data, node) {
      this.$emit('current-change', data, node)
    },
    handleNodeExpand(data, node, element) {
      this.$emit('node-expand', data, node, element)
    },
    handleNodeCollapse(data, node, element) {
      this.$emit('node-collapse', data, node, element)
    },
    handleNodeDragStart(node, event) {
      this.$emit('node-drag-start', node, event)
    },
    handleNodeDragEnter(draggingNode, dropNode, event) {
      this.$emit('node-drag-enter', draggingNode, dropNode, event)
    },
    handleNodeDragLeave(draggingNode, dropNode, event) {
      this.$emit('node-drag-leave', draggingNode, dropNode, event)
    },
    handleNodeDragEnd(draggingNode, dropNode, dropType, event) {
      this.$emit('node-drag-end', draggingNode, dropNode, dropType, event)
    },
    handleNodeDrop(draggingNode, dropNode, dropType) {
      this.$emit('node-drop', draggingNode, dropNode, dropType)
    }
  }
}
</script> 